<template>
    <van-nav-bar title="购物车" />
  
    <div class="list">
      <div class="item" v-for="item in cartArr" :key="item.id">
        <img :src="item.img" alt="" />
        <div>{{ item.title }}</div>
        <div>{{ 100 }}</div>
        <van-stepper v-model="item.num" />
  
        <van-button type="danger">删除</van-button>
  
        <van-checkbox v-model="item.checked">复选框</van-checkbox>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  let cartArr = ref([
    {
      id: 1,
      title: "aa",
      img: "http://gips0.baidu.com/it/u=583074985,2627467797&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
      num: 2,
      checked: true,
    },
    {
      id: 2,
      title: "bb",
      img: "http://gips0.baidu.com/it/u=583074985,2627467797&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
      num: 4,
      checked: false,
    },
  ]);
  </script>
  
  <style scoped>
  .item img {
    width: 100px;
  }
  </style>
  